<script type="text/javascript" src="/js/jquery-1.6.1.js"></script>
<script type="text/javascript" src="/js/jquery.form.js"></script>
<!--<script type="text/javascript" src="/js/upload.js"></script>-->

<input type="hidden" id="createAlbumURL" value="<?php echo url_for('upload/createAlbum'); ?>" /> 
<input type="hidden" id="renameAlbumURL" value="<?php echo url_for('upload/createAlbum'); ?>" /> 
<input type="hidden" id="uploadFileURL" value="<?php echo url_for('upload/uploadFile'); ?>" /> 
<input type="hidden" id="changeFileNameURL" value="<?php echo url_for('upload/createAlbum'); ?>" /> 

<input type="hidden" id="maxImgs" value="10" /> 


<?php
echo $album->renderFormTag(url_for('upload/createAlbum'), array('id'=>'albumForm'));
echo $album->renderHiddenFields();
?>
<table>
    <?php echo $album ?>
    <tr>
        <td>
            <input type="submit" value="submit"/>
        </td>
    </tr>
</table>
</form>
<hr/>
<?php include_partial('upload/uploadFile', array('imgForm' => $imgForm1, 'id'=>1)); ?>
<hr/>
<?php include_partial('upload/uploadFile', array('imgForm' => $imgForm2, 'id'=>2)); ?>
<hr/>
<?php include_partial('upload/uploadFile', array('imgForm' => $imgForm3, 'id'=>3)); ?>
<hr/>
<input type="button" onclick="upload()" value="Do everyThing!!!"/>







<script type="text/javascript">
    var currentForm = 0;
    
    $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('.imgForm').ajaxForm(function(responseText) { 
                var r = responseText.split(";");
                var rr = r[0];
                if(rr != 0){
                    $('#'+currentForm).find('.imgId').attr('id', rr);
                    $('#'+currentForm).find('.fileButton').attr('disabled', 'disabled');
                }
                else{
                    alert('please try again later');
                }
            }); 
        }); 
    
    
    var albumStatus         =   'new';
    var maxNumImgs          =   10;
    var numShownImgForms    =   0;
    //var albumId             =   0;

    function upload(){
        if(albumStatus == 'new'){
            //            alert(albumStatus)
            //            alert($('#albums_name').attr('value'));
            $.get(  
            $('#createAlbumURL').attr('value'),
            $('#albumForm').serialize(),
            function(responseText){  
                //                alert(responseText);
                if(responseText != 0){
                
                    albumStatus = 'created';
                    //                    albumId     =   responseText;
                    //                    $("form.imgForm").append("<input type='hidden' name='image[x]'>");
                    $('.albumId').attr('value', responseText);
//                    alert(responseText);
                    uploadImages();
                }else{
                    //alert
                }
            },  
            "html"  
        ); 
        }
        else if (albumStatus == 'changed'){
            $.get(  
            $('#renameAlbumURL').attr('value'),
            {albumName: $('#albums_name'), albumId: albumId},  
            function(responseText){  
                
                if(responseText == 'done'){
                    
                }
                else{
                    //alert
                }
            },  
            "html"  
        ); 
        }
        else{
            uploadImages();
        }
    }
    

    function uploadImages(){
        alert('will upload images');
        imgForms = $("form.imgForm");
        $.each(imgForms, function(k,v){
            //status = $( v " .imgStatus:first" ); 
            status = $(this).attr('status');
            if(status == 'new'){
                currentForm = $(this).attr('id');
                $(this).submit();
                    
                    $(this).attr('status', 'uploaded');
            }
            else if(status == 'changed'){
                
            }
        });
    }


    $('.fileButton').click(function(){
        //alert('fverer');
        $(this).parents('.imgForm').attr('status', 'new');
        //.each(function(){$(this).attr('value', 'new');});
        //alert( $(this).attr('status', 'new'));
        //$('.status').attr('value', 'new');
        //    $('parentx.children().each(if)>.status').attr('value','new');
    })
</script>      


